<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框</title>
		<style>
			/* 选择器：抓取页面上的元素，给元素添加效果【添加一个样式】   元素选择器*/
			div{
				/*边框复合属性：  生成1个像素实线橙色的边框*/
				border: 1px solid #ffaa00;
				width: 500px;
				height: 500px;
			}
			/*需求：第二个 div 边框颜色改成黑色*/
			/*id选择器   html元素前标记 加id="别名" 
			            css中  #别名 抓到元素
			class选择器  html元素前标记 加 class="别名1 别名2 "
			            css中 .别名  抓到元素
			*/
			#d2{
				border: 10px solid #000;
				backgr ound-color: #000;
				/*子属性：border-style 边框样式属性*/
				border-style: dotted;
				/* 虚线  双实线  */
				border-style: dashed;
				border-style: double;
				/*子属性: border-color 边框颜色属性*/
				border-color: #ffaa00;
			}
			.d5{
				/*border边框属性【复合属性】：width style color*/
				border: 20px solid #f00;
			    /*子属性：border-width 边框的宽度属性*/	
				/*需求：第三个div 40像素*/
				border-width: 40px;
				/*需求：上边框宽度20px 点线 */
				border-top: 20px dotted #f00;
				/*需求：上边框加颜色*/
				border-top-color: #ff0;
				/*需求：下边框宽度调整为1px*/
				border-bottom-width: 1px;
				/*需求：左边框双实线效果*/
				border-left-style: double;
				/*需求：右边框 5px 虚线 绿色*/
				border-right: 5px dashed green;
			}
			/*border-radius边框倒角属性:边框或者背景颜色
			画圆：宽高与倒角一致
			border-radius属性值： 1个值  代表 上 右  下 左  【顺时针】
			                     2个值  代表 上 下 | 右 左 【顺时针】
								 3个值  代表 上 | 右 左 | 下【顺时针】
								 4个值  代表 上 |右 | 下 |左  【顺时针】
			练习：画圆，4个颜色, 鼠标悬停 旋转		
				 第三div 添加 悬停效果---伪类选择器：追加效果   
				                       语法：任意选择器:hover  悬停效果 功能
			*/
			.d4{
				border: 8px solid #f00;
				border-left-color: #00ff7f;
				border-right-color: #aa00ff;
				border-top-color: #ffff00;
				border-bottom-color: #ff0000;
				border-radius: 50%;
				/*过渡属性：悬停效果增加过渡时间*/
				transition: transform 10s;
			}
			/*第三个div追加悬停效果*/
			.d4:hover{
				/*效果：旋转*/
				/*转换属性: 属性值*/
				transform: rotate(3600000000000000deg);
			}
		</style>
	</head>
	<body>
		<!-- div 有宽没高的空间   
		   css边框的使用---选择器
		-->
		<div></div>
		<div id="d2"></div>
		<div class="d3 d4 d5"></div>
	</body>
</html>